<template>
  <view class="reward-record-page">
    <!-- 页面标题 -->
    <view class="page-title">奖励记录</view>
    
    <!-- 奖励记录列表 -->
    <view class="record-list">
      <view class="record-item" v-for="(record, index) in rewardRecords" :key="index">
        <!-- 时间信息 -->
        <text class="record-time">{{ record.time }}</text>
        
        <!-- 会员基本信息 -->
        <view class="member-basic">
          <view class="info-row">
            <text class="info-label">会员姓名：</text>
            <text class="info-value">{{ record.memberName }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">手机号：</text>
            <text class="info-value">{{ record.phone }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">会员卡号：</text>
            <text class="info-value">{{ record.memberId }}</text>
          </view>
        </view>
        
        <!-- 奖励项目区域 -->
        <view class="reward-items">
          <view class="reward-item" v-for="(item, i) in record.rewards" :key="i">
            <text class="reward-type">{{ item.type }}</text>
            <text class="reward-amount">{{ item.amount }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 奖励记录数据
      rewardRecords: [
        {
          time: '2025-10-24 15:00:00',
          memberName: '张三',
          phone: '152xxxxxxxx',
          memberId: '12345678',
          rewards: [
            { type: '预付款', amount: '+15' },
            { type: '游戏币', amount: '+15' },
            { type: '游乐币', amount: '+15' },
            { type: '彩票', amount: '+15' },
            { type: '电子彩票', amount: '+15' },
            { type: '积分', amount: '+15' }
          ]
        },
        {
          time: '2025-10-24 15:00:00',
          memberName: '李四',
          phone: '152xxxxxxxx',
          memberId: '87654321',
          rewards: [
            { type: '预付款', amount: '+15' },
            { type: '游戏币', amount: '+15' },
            { type: '游乐币', amount: '+15' },
            { type: '彩票', amount: '+15' },
            { type: '电子彩票', amount: '+15' },
            { type: '积分', amount: '+15' }
          ]
        },
        {
          time: '2025-10-24 15:00:00',
          memberName: '张三',
          phone: '152xxxxxxxx',
          memberId: '12345678',
          rewards: [
            { type: '预付款', amount: '+10' },
            { type: '游戏币', amount: '+20' },
            { type: '游乐币', amount: '+15' },
            { type: '彩票', amount: '+5' },
            { type: '电子彩票', amount: '+30' },
            { type: '积分', amount: '+50' }
          ]
        }
      ]
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.ticketDepositRecord')
  	});
  },
};
</script>

<style scoped>
/* 页面容器 - 100%高度 */
.reward-record-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 16px;
  box-sizing: border-box;
}

/* 页面标题 */
.page-title {
  font-size: 18px;
  color: #333;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}

/* 记录列表容器 */
.record-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 单条记录样式 */
.record-item {
  background-color: #fff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* 时间信息样式 */
.record-time {
  display: block;
  font-size: 14px;
  color: #888;
  margin-bottom: 14px;
  padding-left: 4px;
}

/* 会员基本信息区域 */
.member-basic {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed #f0f0f0;
}

/* 信息行通用样式 */
.info-row {
  display: flex;
  margin-bottom: 10px;
  line-height: 1.5;
}

.info-row:last-child {
  margin-bottom: 0;
}

/* 标签文本样式 */
.info-label {
  font-size: 14px;
  color: #666;
  width: 90px;
  flex-shrink: 0;
}

/* 内容文本样式 */
.info-value {
  font-size: 14px;
  color: #333;
  flex: 1;
}

/* 奖励项目容器 */
.reward-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}

/* 单个奖励项样式 */
.reward-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  padding: 10px 6px;
  background-color: #f9f9f9;
  border-radius: 6px;
}

/* 奖励类型文本 */
.reward-type {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}

/* 奖励金额文本 - 绿色突出显示 */
.reward-amount {
  font-size: 15px;
  color: #52c41a;
  font-weight: 500;
}
</style>